<template>
  <div>
    <h3>自定义指令</h3>
    <!--
    自定义指令
        定义：
           局部定义:只能用于当前定义的组件
              directives:{
                 指令名(xxx):{
                    指令的生命周期：从创建到销毁
                    bind:指令绑定于相应标签时执行，类似于beforeMount,读取了指令所在的标签，但是还没有渲染
                    inserted:类似于mounted,渲染后（指令所在标签渲染完成后）
                    update:指令所在组件更新时执行，指令所在标签可能渲染完成也可能没有渲染完成
                    componentUpdated:指令所在组件更新后执行，且保证指令所在标签渲染完成了，类似于updated
                    unbind:销毁时,指令所在标签销毁了，类似于destroyed,善后工作
                    bind(dom,obj,vnode){
                        dom:指令所在dom
                        obj:{
                            属性名:arg(了解)
                            修饰符:modifiers（了解）
                            value:指令的值
                        }
                        vnode:指令所在标签的虚拟dom节点信息
                            {
                                context:指令所在组件的实例对象  this
                            }
                    }

                 }
              }
           全局定义：所有组件都可使用
           Vue.directive('指令名',{指令的生命周期})

        使用：
            div   v-xxx="123"
                 v-on:keyup.enter="方法"
                v-指令名:属性名.修饰符="值"
 -->
    <input v-if="bol" v-focus:aaa.bbb="123" type="text">
    <h3>{{ num }}</h3>
    <button @click="num++">修改num</button>
    <button @click="bol = !bol">销毁input</button>
    <hr>
    <!-- v-hmtext:文本渲染 -->
    <h1>下面是指令</h1>
    <div v-hmtext="msg">123</div>
    <h1>下面是p标签</h1>
    <p>{{ msg }}</p>
    <button @click="setMsg">修改msg</button>
    <input v-model="num" type="text">

    <hr>
    <img v-img="icon" src="https://img01.yzcdn.cn/vant/logo123.png" alt="">
    <!-- <img src="https://img01.yzcdn.cn/vant/logo.png" alt=""> -->
  </div>
</template>
<script>
import icon from '@/assets/common/img.jpeg'
export default {
  directives: {
    focus: {
      bind(dom, obj, vnode) {
        // console.log('bind---obj', obj)
        // console.log('bind----vnode', vnode)
        // console.log(vnode.context.num)
        console.log('bind')
      },
      inserted(dom, obj) {
        dom.focus()
        dom.value = obj.value
        console.log('inserted')
      },
      update() {
        console.log('update')
      },
      componentUpdated() {
        console.log('componentUpdated')
      },
      unbind() {
        console.log('unbind')
      }
    },
    hmtext: {
      inserted(dom, obj, vnode) {
        dom.innerText = obj.value
      },
      componentUpdated(dom, obj) {
        console.log('hmtext componentUpdated', obj)
        if (obj.oldValue !== obj.value) {
          dom.innerText = obj.value
        }
      }
    },
    img: {
      inserted(dom, obj) {
        dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
        // 图片加载出错的监听
        dom.onerror = () => {
          console.log('图片加载出错了')
          dom.src = obj.value || require('@/assets/common/head.jpg')
          // 图片加载出错时执行
        }
        // if(图片加载出错){
        //     使用默认图片
        // }
      },
      componentUpdated(dom) {
        dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
      }
    }
  },
  data() {
    return {
      num: 1,
      bol: true,
      msg: 'hello',
      icon
    }
  },
  methods: {
    setMsg() {
      this.msg = Math.random() * 9999
    }
  }
}
</script>
<style></style>
